<%@ page import="com.zhongkun.pojo.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>个人主页</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/assets/images/favicon.ico">

    <!-- CSS
============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900"
          rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/vendor/bootstrap.min.css">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/vendor/bicon.min.css">
    <!-- Flat Icon CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/vendor/flaticon.css">
    <!-- audio & video player CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/plugins/plyr.css">
    <!-- Slick CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/plugins/slick.min.css">
    <!-- nice-select CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/plugins/nice-select.css">
    <!-- perfect scrollbar css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/plugins/perfect-scrollbar.css">
    <!-- light gallery css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/plugins/lightgallery.min.css">
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/style.css">

</head>

<%
    User userLogin = (User) request.getSession().getAttribute("userLogin");

%>

<body>

<!-- header area start -->
<header>
    <div class="header-top sticky bg-white d-none d-lg-block">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-5">
                    <!-- header top navigation start -->
                    <div class="header-top-navigation">
                        <nav>
                            <ul>
                                <li class="active"><a href="index.html">首页</a></li>
                                <li class="msg-trigger"><a class="msg-trigger-btn" href="#a">个人主页</a>

                                </li>
                                <li class="notification-trigger"><a class="msg-trigger-btn" href="#b">#待添加</a>

                                </li>
                            </ul>
                        </nav>
                    </div>
                    <!-- header top navigation start -->
                </div>

                <div class="col-md-2">
                    <!-- brand logo start -->
                    <div class="brand-logo text-center">
                        <a href="index.html">
                            <img src="${pageContext.request.contextPath}/assets/images/logo/logo.png" alt="brand logo">
                        </a>
                    </div>
                    <!-- brand logo end -->
                </div>

                <div class="col-md-5">
                    <div class="header-top-right d-flex align-items-center justify-content-end">
                        <!-- header top search start -->
                        <div class="header-top-search">
                            <form class="top-search-box">
                                <input type="text" placeholder="Search" class="top-search-field">
                                <button class="top-search-btn"><i class="flaticon-search"></i></button>
                            </form>
                        </div>
                        <!-- header top search end -->

                        <!-- profile picture start -->
                        <div class="profile-setting-box">
                            <div class="profile-thumb-small">
                                <a href="javascript:void(0)" class="profile-triger">
                                    <figure>
                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-1.jpg"
                                             alt="profile picture">
                                    </figure>
                                </a>
                                <div class="profile-dropdown">
                                    <div class="profile-head">
                                        <h5 class="name"><a href="#">昵称</a></h5>
                                        <a class="mail" href="#">用户名</a>
                                    </div>
                                    <div class="profile-body">
                                        <ul>
                                            <li><a href="profile.html"><i class="flaticon-user"></i>个人中心</a>
                                            </li>
                                            <li><a href="#"><i class="flaticon-message"></i>#待添加</a></li>
                                            <li><a href="#"><i class="flaticon-document"></i>动态</a></li>
                                        </ul>
                                        <ul>
                                            <li><a href="signup.html"><i class="flaticon-unlock"></i>登出</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- profile picture end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- header area end -->

<!-- header area start -->
<header>
    <div class="mobile-header-wrapper sticky d-block d-lg-none">
        <div class="mobile-header position-relative ">
            <div class="mobile-logo">
                <a href="index.html">
                    <img src="${pageContext.request.contextPath}/assets/images/logo/logo-white.png" alt="logo">
                </a>
            </div>
            <div class="mobile-menu w-100">
                <ul>
                    <li>
                        <button class="notification request-trigger"><i class="flaticon-users"></i>
                            <span>03</span>
                        </button>
                        <ul class="frnd-request-list">
                            <li>
                                <div class="frnd-request-member">
                                    <figure class="request-thumb">
                                        <a href="profile.html">
                                            <img src="${pageContext.request.contextPath}/assets/images/profile/profile-midle-1.jpg"
                                                 alt="proflie author">
                                        </a>
                                    </figure>
                                    <div class="frnd-content">
                                        <h6 class="author"><a href="profile.html">merry watson</a></h6>
                                        <p class="author-subtitle">Works at HasTech</p>
                                        <div class="request-btn-inner">
                                            <button class="frnd-btn">confirm</button>
                                            <button class="frnd-btn delete">delete</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="frnd-request-member">
                                    <figure class="request-thumb">
                                        <a href="profile.html">
                                            <img src="${pageContext.request.contextPath}/assets/images/profile/profile-midle-2.jpg"
                                                 alt="proflie author">
                                        </a>
                                    </figure>
                                    <div class="frnd-content">
                                        <h6 class="author"><a href="profile.html">merry watson</a></h6>
                                        <p class="author-subtitle">Works at HasTech</p>
                                        <div class="request-btn-inner">
                                            <button class="frnd-btn">confirm</button>
                                            <button class="frnd-btn delete">delete</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="frnd-request-member">
                                    <figure class="request-thumb">
                                        <a href="profile.html">
                                            <img src="${pageContext.request.contextPath}/assets/images/profile/profile-midle-3.jpg"
                                                 alt="proflie author">
                                        </a>
                                    </figure>
                                    <div class="frnd-content">
                                        <h6 class="author"><a href="profile.html">merry watson</a></h6>
                                        <p class="author-subtitle">Works at HasTech</p>
                                        <div class="request-btn-inner">
                                            <button class="frnd-btn">confirm</button>
                                            <button class="frnd-btn delete">delete</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <button class="notification"><i class="flaticon-notification"></i>
                            <span>03</span>
                        </button>
                    </li>
                    <li>
                        <button class="chat-trigger notification"><i class="flaticon-chats"></i>
                            <span>04</span>
                        </button>
                        <div class="mobile-chat-box">
                            <div class="live-chat-title">
                                <!-- profile picture end -->
                                <div class="profile-thumb">
                                    <a href="profile.html">
                                        <figure class="profile-thumb-small profile-active">
                                            <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-15.jpg"
                                                 alt="profile picture">
                                        </figure>
                                    </a>
                                </div>
                                <!-- profile picture end -->
                                <div class="posted-author">
                                    <h6 class="author"><a href="profile.html">Robart Marloyan</a></h6>
                                    <span class="active-pro">active now</span>
                                </div>
                                <div class="live-chat-settings ml-auto">
                                    <button class="chat-settings"><img src="${pageContext.request.contextPath}/assets/images/icons/settings.png"
                                                                       alt=""></button>
                                    <button class="close-btn"><img src="${pageContext.request.contextPath}/assets/images/icons/close.png"
                                                                   alt=""></button>
                                </div>
                            </div>
                            <div class="message-list-inner">
                                <ul class="message-list custom-scroll">
                                    <li class="text-friends">
                                        <p>Many desktop publishing packages and web page editors now use Lorem
                                            Ipsum as their default model text</p>
                                        <div class="message-time">10 minute ago</div>
                                    </li>
                                    <li class="text-author">
                                        <p>Many desktop publishing packages and web page editors</p>
                                        <div class="message-time">5 minute ago</div>
                                    </li>
                                    <li class="text-friends">
                                        <p>packages and web page editors </p>
                                        <div class="message-time">2 minute ago</div>
                                    </li>
                                    <li class="text-friends">
                                        <p>Many desktop publishing packages and web page editors now use Lorem
                                            Ipsum as their default model text</p>
                                        <div class="message-time">10 minute ago</div>
                                    </li>
                                    <li class="text-author">
                                        <p>Many desktop publishing packages and web page editors</p>
                                        <div class="message-time">5 minute ago</div>
                                    </li>
                                    <li class="text-friends">
                                        <p>packages and web page editors </p>
                                        <div class="message-time">2 minute ago</div>
                                    </li>
                                </ul>
                            </div>
                            <div class="chat-text-field mob-text-box">
										<textarea class="live-chat-field custom-scroll"
                                                  placeholder="Text Message"></textarea>
                                <button class="chat-message-send" type="submit" value="submit">
                                    <img src="${pageContext.request.contextPath}/assets/images/icons/plane.png" alt="">
                                </button>
                            </div>
                        </div>
                    </li>
                    <li>
                        <button class="search-trigger">
                            <i class="search-icon flaticon-search"></i>
                            <i class="close-icon flaticon-cross-out"></i>
                        </button>
                        <div class="mob-search-box">
                            <form class="mob-search-inner">
                                <input type="text" placeholder="Search Here" class="mob-search-field">
                                <button class="mob-search-btn"><i class="flaticon-search"></i></button>
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mobile-header-profile">
                <!-- profile picture end -->
                <div class="profile-thumb profile-setting-box">
                    <a href="javascript:void(0)" class="profile-triger">
                        <figure class="profile-thumb-middle">
                            <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-1.jpg" alt="profile picture">
                        </figure>
                    </a>
                    <div class="profile-dropdown text-left">
                        <div class="profile-head">
                            <h5 class="name"><a href="#">Madison Howard</a></h5>
                            <a class="mail" href="#">mailnam@mail.com</a>
                        </div>
                        <div class="profile-body">
                            <ul>
                                <li><a href="profile.html"><i class="flaticon-user"></i>Profile</a></li>
                                <li><a href="#"><i class="flaticon-message"></i>Inbox</a></li>
                                <li><a href="#"><i class="flaticon-document"></i>Activity</a></li>
                            </ul>
                            <ul>
                                <li><a href="#"><i class="flaticon-settings"></i>Setting</a></li>
                                <li><a href="signup.html"><i class="flaticon-unlock"></i>Sing out</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- profile picture end -->
            </div>
        </div>
    </div>
</header>
<!-- header area end -->

<main>

    <div class="main-wrapper">
        <!-- profile banner area start -->
        <div class="profile-banner-large bg-img" data-bg="${pageContext.request.contextPath}/assets/images/banner/profile-banner.jpg">
        </div>
        <!-- profile banner area end -->

        <!-- profile menu area start -->
        <div class="profile-menu-area bg-white">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-3 col-md-3">
                        <div class="profile-picture-box">
                            <figure class="profile-picture">
                                <a href="profile.html">
                                    <img src="${pageContext.request.contextPath}/assets/images/profile/profile-1.jpg" alt="profile picture">
                                </a>
                            </figure>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 offset-lg-1">
                        <div class="profile-menu-wrapper">
                            <div class="main-menu-inner header-top-navigation">
                                <nav>
                                    <ul class="main-menu">
                                        <li class="active"><a href="#">时间串</a></li>
                                        <li><a href="about.html">关于</a></li>
                                        <li><a href="photos.html">本站图库</a></li>
                                        <li><a href="friends.html">所有同学</a></li>
                                        <li><a href="about.html">更多</a></li>
                                        <!-- <li class="d-inline-block d-md-none"><a href="profile.html">edit profile</a></li> -->
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 d-none d-md-block">
                        <div class="profile-edit-panel">
                            <button class="edit-btn">改头换面啦</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- profile menu area end -->

        <!-- sendary menu start -->
        <div class="menu-secondary">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="secondary-menu-wrapper bg-white">
                            <div class="page-title-inner">
                                <h4 class="page-title">about</h4>
                            </div>
                            <div class="main-menu-inner header-top-navigation">
                                <nav>
                                    <ul class="main-menu">
                                        <li><a href="#"><span>facebook</span> <i
                                                class="flaticon-facebook"></i></a></li>
                                        <li><a href="#"><span>twitter</span> <i
                                                class="flaticon-twitter-logo-silhouette"></i></a></li>
                                        <li><a href="#"><span>google</span> <i
                                                class="flaticon-google-plus"></i></a></li>
                                        <li><a href="#"><span>pinterest</span> <i
                                                class="flaticon-pinterest"></i></a></li>
                                        <!-- <li class="d-inline-block d-md-none"><a href="profile.html">edit profile</a></li> -->
                                    </ul>
                                </nav>
                            </div>
                            <div class="post-settings-bar">
                                <span></span>
                                <span></span>
                                <span></span>
                                <div class="post-settings arrow-shape">
                                    <ul>
                                        <li><button>edit profile</button></li>
                                        <li><button>activity log</button></li>
                                        <li><button>embed adda</button></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- sendary menu end -->

        <!-- 主页信息 -->
        <!-- about author details start -->
        <div class="about-author-details">
            <div class="container">
                <div class="row">
                <div class="col-lg-3">
                    <div class="card widget-item" >
                        <div class="about-me">
                            <ul class="nav flex-column about-author-menu">
                                <li><a href="#one" data-toggle="tab" class="active">TA的信息</a></li>
                                <li><a href="#two" data-toggle="tab">TA的动态</a></li>
                                <li><a href="#three" data-toggle="tab">TA的评论</a></li>
                                <li>
                                    <img src="${pageContext.request.contextPath}/assets/images/banner/advertise.jpg"/>
                                </li>
                                <li>
                                    <img src="${pageContext.request.contextPath}/assets/images/banner/advertise.jpg"/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="about-description" style="height:100%;">
                        <div class="tab-content" style="height:100%;">
                            <div class="tab-pane fade active show" id="one">
                                <div class="work-zone">
                                    <div class="author-desc-title d-flex">
                                        <h6 class="author"><a href="profile.html">TA的信息</a></h6>
                                    </div>
                                    <ul class="list-group">
                                        <li class="list-group-item">昵称</li>
                                        <li class="list-group-item">个签</li>
                                        <li class="list-group-item">性别</li>
                                        <li class="list-group-item">注册时长</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="tab-pane  pre-scrollable" id="two">
                                <div class="work-zone">
                                    <div class="author-desc-title d-flex">
                                        <h6 class="author"><a href="profile.html">TA的动态</a></h6>
                                    </div>
                                    <!-- 这里放动态 -->
                                    <!-- post status start -->
                                    <div class="card">
                                        <!-- post title start -->
                                        <div class="post-title d-flex align-items-center">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-2.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">merry watson</a></h6>
                                                <span class="post-time">20 min ago</span>
                                            </div>

                                        </div>
                                        <!-- post title start -->
                                        <div class="post-content">
                                            <p class="post-desc">
                                                动态
                                            </p>
                                            <div class="post-thumb-gallery">
                                                <figure class="post-thumb img-popup">
                                                    <a href="${pageContext.request.contextPath}/assets/images/post/post-large-1.jpg">
                                                        <img src="${pageContext.request.contextPath}/assets/images/post/post-1.jpg" alt="post image">
                                                    </a>
                                                </figure>
                                            </div>
                                            <div class="post-meta">
                                                <button class="post-meta-like">
                                                    <i class="bi bi-heart-beat"></i>
                                                    <span>You and 201 people like this</span>
                                                    <strong>201</strong>
                                                </button>
                                                <ul class="comment-share-meta">
                                                    <li>
                                                        <button class="btn post-comment" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                                            <i class="bi bi-chat-bubble"></i>
                                                            <span>41</span>
                                                        </button>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>


                                        <!-- 打算评论区 -->
                                        <div id="collapseExample" class="widget-body collapse"  style="margin-top: 1.25rem;" >
                                            <h4 class="widget-title">评论区</h4>
                                            <!-- share content box start -->

                                            <div class="share-content-box w-100" style="margin-top: -20px;">
                                                <form class="share-text-box">
																<textarea name="share" class="share-text-field" aria-disabled="true"
                                                                          placeholder="评论点啥呢……"></textarea>
                                                    <button class="btn-share" type="submit">发布评论</button>
                                                </form>
                                            </div>
                                            <div class="dropdown-divider"></div>
                                            <!-- share content box end -->
                                            <ul class="like-page-list-wrapper">
                                                <li class="unorder-list">
                                                    <!-- profile picture end -->
                                                    <div class="profile-thumb">
                                                        <a href="#">
                                                            <figure class="profile-thumb-small">
                                                                <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-9.jpg"
                                                                     alt="profile picture">
                                                            </figure>
                                                        </a>
                                                    </div>
                                                    <!-- profile picture end -->

                                                    <div class="unorder-list-info">
                                                        <h3 class="list-title" style="font-weight: bold;"><a href="#">评论者昵称</a>
                                                        </h3>
                                                        <p class="list-subtitle">时间</p>
                                                        <p class="post-desc pb-0">内容</p>
                                                    </div>
                                                </li>
                                                <div class=" dropdown-divider">
                                                </div>
                                                <li class="unorder-list">
                                                    <!-- profile picture end -->
                                                    <div class="profile-thumb">
                                                        <a href="#">
                                                            <figure class="profile-thumb-small">
                                                                <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-9.jpg"
                                                                     alt="profile picture">
                                                            </figure>
                                                        </a>
                                                    </div>
                                                    <!-- profile picture end -->

                                                    <div class="unorder-list-info">
                                                        <h3 class="list-title" style="font-weight: bold;"><a href="#">评论者昵称</a>
                                                        </h3>
                                                        <p class="list-subtitle">时间</p>
                                                        <p class="post-desc pb-0">内容</p>
                                                    </div>
                                                </li>
                                                <div class=" dropdown-divider">
                                                </div>

                                            </ul>
                                        </div>
                                    </div>
                                    <!-- post status end -->
                                    <!-- 动态结束 -->

                                </div>
                                <p>解决不了这个滚动条太短的问题！！！！</p>
                            </div>
                            <div class="tab-pane fade" id="three">
                                <div class="work-zone">
                                    <div class="author-desc-title d-flex">
                                        <h6 class="author"><a href="profile.html">TA的评论</a></h6>
                                    </div>
                                    <!-- 这里放他曾经的各种评论 -->
                                </div>
                            </div>
                            <div class="tab-pane fade" id="four">
                                <div class="work-zone">
                                    <div class="author-desc-title d-flex">
                                        <h6 class="author"><a href="profile.html">开发中</a></h6>
                                        <div class="post-settings-bar">
                                        </div>
                                        <!-- 放东西 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- about author details start -->

        <!-- photo section start -->
        <div class="photo-section" style="margin-top: 5%;">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="content-box">
                            <h5 class="content-title">photos</h5>
                            <div class="content-body">
                                <div class="row mt--30">
                                    <div class="col-sm-6 col-md-4">
                                        <div class="photo-group">
                                            <div class="gallery-toggle">
                                                <div class="d-none product-thumb-large-view">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-1.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-2.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-3.jpg"
                                                         alt="Photo Gallery">
                                                </div>
                                                <div class="gallery-overlay">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-1.jpg"
                                                         alt="Photo Gallery">
                                                    <div class="view-icon"></div>
                                                </div>
                                                <div class="photo-gallery-caption">
                                                    <h3 class="photos-caption">office hangout (06)</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4">
                                        <div class="photo-group">
                                            <div class="gallery-toggle">
                                                <div class="d-none product-thumb-large-view">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-2.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-5.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-6.jpg"
                                                         alt="Photo Gallery">
                                                </div>
                                                <div class="gallery-overlay">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-2.jpg"
                                                         alt="Photo Gallery">
                                                    <div class="view-icon"></div>
                                                </div>
                                                <div class="photo-gallery-caption">
                                                    <h3 class="photos-caption">dream land (12)</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4">
                                        <div class="photo-group">
                                            <div class="gallery-toggle">
                                                <div class="d-none product-thumb-large-view">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-3.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-6.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-2.jpg"
                                                         alt="Photo Gallery">
                                                </div>
                                                <div class="gallery-overlay">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-3.jpg"
                                                         alt="Photo Gallery">
                                                    <div class="view-icon"></div>
                                                </div>
                                                <div class="photo-gallery-caption">
                                                    <h3 class="photos-caption">travel zone (34)</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4">
                                        <div class="photo-group">
                                            <div class="gallery-toggle">
                                                <div class="d-none product-thumb-large-view">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-4.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-1.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-2.jpg"
                                                         alt="Photo Gallery">
                                                </div>
                                                <div class="gallery-overlay">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-4.jpg"
                                                         alt="Photo Gallery">
                                                    <div class="view-icon"></div>
                                                </div>
                                                <div class="photo-gallery-caption">
                                                    <h3 class="photos-caption">pure nature (17)</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4">
                                        <div class="photo-group">
                                            <div class="gallery-toggle">
                                                <div class="d-none product-thumb-large-view">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-5.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-4.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-2.jpg"
                                                         alt="Photo Gallery">
                                                </div>
                                                <div class="gallery-overlay">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-5.jpg"
                                                         alt="Photo Gallery">
                                                    <div class="view-icon"></div>
                                                </div>
                                                <div class="photo-gallery-caption">
                                                    <h3 class="photos-caption">family tour (37)</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4">
                                        <div class="photo-group">
                                            <div class="gallery-toggle">
                                                <div class="d-none product-thumb-large-view">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-6.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-3.jpg"
                                                         alt="Photo Gallery">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-2.jpg"
                                                         alt="Photo Gallery">
                                                </div>
                                                <div class="gallery-overlay">
                                                    <img src="${pageContext.request.contextPath}/assets/images/photos/photo-6.jpg"
                                                         alt="Photo Gallery">
                                                    <div class="view-icon"></div>
                                                </div>
                                                <div class="photo-gallery-caption">
                                                    <h3 class="photos-caption">chill zone (06)</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="load-more text-center">
                                            <button class="load-more-btn">load more</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- photo section end -->

        <!-- photo section start -->
        <div class="friends-section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="content-box">
                            <h5 class="content-title">friends</h5>
                            <div class="content-body">
                                <div class="row mt--20">
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-1.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">Kate Midiltoin</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-4.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">Jon Wileyam</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-7.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">william henry</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-22.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">Kate Midiltoin</a>
                                                </h6>
                                                <button class="add-frnd">friend request sent</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-10.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">Omio Morganik</a>
                                                </h6>
                                                <button class="add-frnd">friend request sent</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-13.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">william henry</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-18.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">erik jonson</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-25.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">peter looks</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-16.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">jhon doe</a></h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-12.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">william henry</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-9.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">william henry</a>
                                                </h6>
                                                <button class="add-frnd">friend request sent</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-17.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">musa kollins</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-11.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">petter jhon</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-20.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">henry william</a>
                                                </h6>
                                                <button class="add-frnd">friend request sent</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-32.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">cristian paul</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-31.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">willson merry</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-29.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">jhonsina boss</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-26.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">william jowel</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-19.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">ashim pual</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="friend-list-view">
                                            <!-- profile picture end -->
                                            <div class="profile-thumb">
                                                <a href="#">
                                                    <figure class="profile-thumb-middle">
                                                        <img src="${pageContext.request.contextPath}/assets/images/profile/profile-small-23.jpg"
                                                             alt="profile picture">
                                                    </figure>
                                                </a>
                                            </div>
                                            <!-- profile picture end -->

                                            <div class="posted-author">
                                                <h6 class="author"><a href="profile.html">Barak Obama</a>
                                                </h6>
                                                <button class="add-frnd">add friend</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="load-more text-center">
                                            <button class="load-more-btn">load more</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- photo section end -->

        <!-- favorite book section start -->
        <div class="faborite-books">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="content-box">
                            <h5 class="content-title">favorite books</h5>
                            <div class="content-body">
                                <div class="row favorite-item-carousel">
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/books/book-1.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/books/book-2.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/books/book-3.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/books/book-4.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/books/book-5.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/books/book-6.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="load-more text-center">
                                            <button class="load-more-btn">load more</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- favorite book section end -->

        <!-- favorite book section start -->
        <div class="faborite-books">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="content-box">
                            <h5 class="content-title">favorite sports</h5>
                            <div class="content-body">
                                <div class="row favorite-item-carousel">
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/sports/sport-1.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/sports/sport-2.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/sports/sport-3.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/sports/sport-4.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/sports/sport-5.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="col">
                                        <figure class="favorite-item">
                                            <a href="#">
                                                <img src="${pageContext.request.contextPath}/assets/images/sports/sport-6.jpg" alt="">
                                            </a>
                                        </figure>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="load-more text-center">
                                            <button class="load-more-btn">load more</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- favorite book section end -->
    </div>

    </div>
</main>

<!-- Scroll to top start -->
<div class="scroll-top not-visible">
    <i class="bi bi-finger-index"></i>
</div>
<!-- Scroll to Top End -->

<!-- footer area start -->
<footer class="footer">
    <div class="container">
        <p style="text-align: center;">所有者：钟琨</p>
        <p style="text-align: center;">3274065222@qq.com</p>
    </div>
</footer>
<!-- footer area end -->
<!-- footer area start -->
<footer class="d-block d-lg-none">

</footer>
<!-- footer area end -->


<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="${pageContext.request.contextPath}/assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- jQuery JS -->
<script src="${pageContext.request.contextPath}/assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Popper JS -->
<script src="${pageContext.request.contextPath}/assets/js/vendor/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="${pageContext.request.contextPath}/assets/js/vendor/bootstrap.min.js"></script>
<!-- Slick Slider JS -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/slick.min.js"></script>
<!-- nice select JS -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/nice-select.min.js"></script>
<!-- audio video player JS -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/plyr.min.js"></script>
<!-- perfect scrollbar js -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/perfect-scrollbar.min.js"></script>
<!-- light gallery js -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/lightgallery-all.min.js"></script>
<!-- image loaded js -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/imagesloaded.pkgd.min.js"></script>
<!-- isotope filter js -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/isotope.pkgd.min.js"></script>
<!-- Main JS -->
<script src="${pageContext.request.contextPath}/assets/js/main.js"></script>

</body>

</html>

